<template>
  <div>
    <div v-if="isShow" px-16rpx pb-200rpx>
    </div>
    <div v-if="sueDetail" mb-24rpx card p-32rpx>
      <div my-10rpx>
        <column :image="sueDetail.goodsImage" :price="sueDetail.orderPrice" :res="sueDetail">

        </column>
      </div>

    </div>

    <div mb-24rpx card>
      <div p-32rpx flex flex-a-c flex-j-sb>
        <div>我的投诉信息</div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">投诉状态：</div>
        <div class="order-cell_value">{{ statusData[sueDetail.complainStatus] }}</div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">投诉主题：</div>
        <div class="order-cell_value">{{ sueDetail.complainTopic }}</div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">投诉内容：</div>
        <div class="order-cell_value">
          <div mb-20rpx>
            {{ sueDetail.content }}
          </div>

          <div v-if="sueDetail.orderComplaintImages">
            <image @click="preview(sueDetail.orderComplaintImages, index)" w-100rpx h-100rpx rounded-10rpx
              v-for="(item, index) in sueDetail.orderComplaintImages" :key="index" :src="item" />
          </div>
        </div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">投诉时间：</div>
        <div class="order-cell_value">{{ sueDetail.createTime }}</div>
      </div>
    </div>
    <div mb-24rpx card v-if="sueDetail.orderComplaintCommunications && sueDetail.orderComplaintCommunications.length">
      <div p-32rpx flex flex-a-c flex-j-sb>
        <div>对话详情</div>
      </div>
      <div :key="i" v-for="(complaint, i) in sueDetail.orderComplaintCommunications" class="order-cell">
        <div class="order-cell_label">
          <nut-tag :custom-color="colors.themeColor" v-if="complaint.owner == 'PLATFORM'">
            平台
          </nut-tag>
          <nut-tag v-if="complaint.owner == 'BUYER'" plain>买家</nut-tag>
          <nut-tag v-if="complaint.owner == 'STORE'" :custom-color="colors.themeColor" plain>卖家</nut-tag>
        </div>
        <div class="order-cell_value">{{ complaint.content }}</div>
      </div>

    </div>


    <div mb-24rpx card>
      <div p-32rpx flex flex-a-c flex-j-sb>
        <div>商家申诉信息</div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">申诉时间：</div>
        <div class="order-cell_value">{{ sueDetail.appealTime || '暂无' }}</div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">申诉内容：</div>
        <div class="order-cell_value">
          <div>
            {{ sueDetail.appealContent || '暂无' }}
          </div>
          <div v-if="sueDetail.appealImagesList">
            <image w-100rpx h-100rpx v-for="( item, index ) in  sueDetail.appealImagesList "
              @click="preview(sueDetail.appealImagesList, index)" :key="index" :src="item" />
          </div>
        </div>
      </div>
    </div>
    <div mb-24rpx pb-32rpx card v-if="sueDetail.arbitrationResult">
      <div p-32rpx flex flex-a-c flex-j-sb>
        <div>平台仲裁</div>
        <div class="order-cell">
          <div class="order-cell_label">仲裁意见：</div>
          <div class="order-cell_value">{{ sueDetail.arbitrationResult || '暂无' }}</div>
        </div>
      </div>
    </div>
    <div mb-24rpx pb-32rpx card>
      <div p-32rpx flex flex-a-c flex-j-sb>
        <div>回复对话</div>
      </div>
      <div px-24rpx>
        <nut-textarea :custom-style="{ backgroundColor: colors.bgColor, padding: '20rpx' }" class="field-input"
          height="500" :border-bottom="false" v-model="complaintContent" type="textarea"
          placeholder="请输入回复内容"></nut-textarea>
      </div>
      <div p-32rpx>
        <nut-button :loading="loading" type="primary" @click="receive" block>提交</nut-button>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import { addReply, getComplainDetail } from '@/api/after-sale';
import column from '@/components/goods-list/column.vue';
import { colors } from '@/constants/injection-key';
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
const isShow = ref<boolean>(false) //是否展示页面
const sueDetail = ref<any>("")
const routerVal = ref<any>({})
const loading = ref(false)
const complaintContent = ref<string>('')
const statusData: any = {
  NEW: "新投诉",
  NO_APPLY: "未申请",
  APPLYING: "申请中",
  COMPLETE: "已完成",
  EXPIRED: "已失效",
  CANCEL: "已取消",
  WAIT_ARBITRATION: "等待仲裁",
  WAIT_APPEAL: "商家待申诉"
}

async function receive() {
  if (!complaintContent.value) {
    uni.showToast({
      title: '请输入回复内容',
      icon: 'none'
    })
    return
  }
  loading.value = true
  let params = {
    content: complaintContent.value,
    complainId: routerVal.value.id,
  };

  const res = await addReply(params)
  loading.value = false
  if (res.data.success) {
    uni.showToast({
      title: '回复成功',
      icon: 'none'
    })
    complaintContent.value = ''
    init()
  }
}

async function init() {
  uni.stopPullDownRefresh();
  const res = await getComplainDetail(routerVal.value.id);
  if (res.data.success) {
    sueDetail.value = res.data.result
  }
}



function preview(urls: any, index: number) {
  uni.previewImage({
    current: index,
    urls: urls,
    longPressActions: {
      itemList: ["保存图片"],
      success: function (data) { },
      fail: function (err) { },
    },
  });
}


onPullDownRefresh(() => {
  init()
})

onLoad((options) => {
  routerVal.value = options
  init()
})
</script>

<style scoped lang="scss">
.order-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;

  font-size: 24rpx;

  &_label {
    color: #999;
    font-size: 24rpx;
    min-width: 150rpx;
  }

  &_value {
    text-align: right;

  }
}
</style>
